<template>
  <el-dialog :title="title" v-model.visible="dialogVisible" :width="dialogWidth" top="0" append-to-body
    class="columnHandleDialog dialog-vertical-center dialog-body-padding-top-bottom-0" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="dialogClose" @closed="dialogClose">
    <el-card v-if="dataLoading || errorMessage">
      <el-result v-if="errorMessage" icon="error" title="数据获取错误" :sub-title="errorMessage">
        <template #extra>
          <el-button type="primary" size="medium" @click="initData()">重试</el-button>
        </template>
      </el-result>
      <div v-else-if="dataLoading" class="data-loading">
        <svg-loading />
        <span class="loading-text">数据加载中...</span>
      </div>
    </el-card>
    <div v-else-if="params.componentGroup === 'dynamicParameterBlock' && columnData.length"
      class="column-handle-container">
      <select-target-column v-if="params.component === 'dynamicParameter'" :ref="params.component"
        :column-data="columnData" :params="params" />
      <condition-screen v-if="params.component === 'conditionScreen'" :ref="params.component" :column-data="columnData"
        :params="params" />
      <sort-screen v-if="params.component === 'sortScreen'" :ref="params.component" :column-data="columnData"
        :params="params" />
      <array-section v-if="params.component === 'arraySection'" :ref="params.component" :params="params" />
      <condition-unit-screen v-if="params.component === 'conditionUnitScreen'" :ref="params.component"
        :column-data="columnData" :params="params" />
      <expression v-if="params.component === 'expression'" :ref="params.component" :column-data="columnData"
        :params="params" />
    </div>
    <template #footer>
      <div>
        <el-button @click="dialogClose()">取消</el-button>
        <el-button type="primary" :loading="btnSaveLoading" :disabled="dataLoading || !!errorMessage"
          @click="saveCommit">{{ buttonText }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from "vue"
import SvgLoading from '../../components/svgLoading.vue'
import SelectTargetColumn from './selectTargetColumn.vue'
import ConditionScreen from './conditionScreen.vue'
import SortScreen from './sortScreen.vue'
import ArraySection from './arraySection.vue'
import ConditionUnitScreen from './conditionUnitScreen.vue'
import Expression from './expression.vue'
import dagGraph from 'src/pages/designerTool/canvas/DagEdit/graph/index.js'
const props = ({
  idConfig: {
    type: Object
  }
})
const dialogVisible = ref(false)
const buttonText = ref('确定')
const title = ref('')
const btnSaveLoading = ref(false)
const columnData = ref(<any>[])
const dataLoading = ref(false)
const errorMessage = ref('')
const params = ref(<Record<string,any>>{})
const dialogWidth = ref('800px')
function init(params:any) {
  title.value = params.label
  params.value = params
  dialogVisible.value = true
  nextTick(() => {
    switch (params.component) {
      case 'dynamicParameter':
      case 'conditionScreen':
      case 'sortScreen':
      case 'conditionUnitScreen':
      case 'expression':
        initData()
        break
      case 'arraySection':
        columnData.value = [1]
        break
      default:
    }
  })
}
function initData() {
  errorMessage.value = ''
  columnData.value = []
  const formData = {
    operator_id: params.value.operator_id,
    node_id: params.value.node_id,
    workflow_id: props.idConfig.workflowInfoId,
    input: params.value.input || undefined
  }
  dataLoading.value = true
  dagGraph.saveOrUpdateWorkflowData().then(res => {
    this.$api.getWorkflowDynamicParameter(formData).then((res: any) => {
      let data = []
      if (res.result) {
        for (const key in res.result) {
          if (res.result[key] && Array.isArray(res.result[key])) {
            if (res.result[key] !== null) {
              data = res.result[key]
            }
          }
        }
      }
      columnData.value = data
      dataLoading.value = false
    }, (res: any) => {
      errorMessage.value = res.result
      dataLoading.value = false
    })
  }, res => {
    errorMessage.value = res.result
  })
}
function dialogClose() {
  this.$emit('update:visible', false)
}
function saveCommit() {
  const componentData = this.$refs[this.params.component].saveCommit()
  if (componentData) {
    const data = {
      index: params.value.index,
      node: componentData.node,
      form: componentData.form
    }
    this.$emit('updateTargetColumnData', data)
    dialogClose()
  }
}
</script>

<style lang="scss" scoped>
.columnHandleDialog {
  ::v-deep.el-transfer-panel {
    width: calc(50% - 92px);

    .el-transfer-panel__body {
      height: 500px;
    }

    .el-transfer-panel__list.is-filterable {
      height: calc(100% - 52px);
    }
  }

  .data-loading {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

    ::v-deep.SvgLoading {
      position: unset;

      .loader {
        top: 43%;
      }
    }

    .loading-text {
      margin-top: 194px;
      margin-bottom: 73px;
      font-size: 17px;
    }
  }
}
</style>
